<template>
<!-- 首页 -->
	<div class="main-container">
    <img class="banner" :src="bannerImg" alt="banner">
    <div class="intro-block-company" >
      <div class="intro-section">
        <div class="title-block">
          <p class="title">企业文化</p>
          <p class="desc">Corporate Culture</p>
          <div class="line"></div>
        </div>
        <div class="product-list" v-if="cultureList.length > 0">
          <div class="culture-item" v-for="item in cultureList">
            <img :src="item.image" >
            <p class="name">{{item.name}}</p>
            <p class="desc">{{item.description}}</p>
          </div>
        </div>
      </div>
    </div>
		<div class="intro-section">
      <div class="title-block">
        <p class="title">产品服务</p>
        <p class="desc">Product Service</p>
        <div class="line"></div>
      </div>
      <div class="product-list">
        <div class="product-item" v-for="item in productList">
          <div style="background: rgba(249, 249, 249, 0.8);padding: 15px;">
            <img :src="item.image" >
            <p v-html="item.name"></p>
            <div class="go-detail" @click="goProduct(item.url)">了解详情</div>
          </div>
        </div>
      </div>
    </div>
    <div class="intro-block-company" >
      <div class="intro-section">
        <div class="title-block">
          <p class="title">公司介绍</p>
          <p class="desc">Company Introduction</p>
          <div class="line"></div>
        </div>
        <div class="company">
          <p class="name">{{companyName}}</p>
          <p class="desc p-b-20" v-html="companyDesc"></p>

          <div style="padding: 0 14px">
            <swiper :options="swiperOption" ref="mySwiper" class="product-list" >
              <swiper-slide class="company-item" style="height: 250px" v-for="(item, index) in companyList" :key="index">
                <img :src="item.image" >
                <!--              <div class="company-info">-->
                <!--                <p class="name">{{item.name}}</p>-->
                <!--                <p>电话：{{item.telephone}}</p>-->
                <!--                <p>地址：{{item.address}}</p>-->
                <!--              </div>-->
              </swiper-slide>
            </swiper>
          </div>

        </div>
      </div>
    </div>

    <div class="contact">
      <el-tooltip effect="light" popper-class="main-modify-tooltip" content="" placement="left">
        <div slot="content" class="">
          <img width="200" height="200" src="~@/assets/images/contact-enterprise.jpg" alt="企业微信">
        </div>
        <div class="contactItem">
          <img class="contactItem-image" src="~@/assets/images/wechat-enterprise.png" alt="企业微信" />
          <span class="contactItem-text">企微</span>
        </div>
      </el-tooltip>
      <el-tooltip effect="light" popper-class="main-modify-tooltip" content="" placement="left">
        <div slot="content" class="">
          <img width="200" height="200" src="~@/assets/images/gzhcode.jpg" alt="公众号二维码">
        </div>
        <div class="contactItem">
          <img class="contactItem-image" src="~@/assets/images/wechat.png" alt="公众号二维码" />
          <span class="contactItem-text">公众号</span>
        </div>
      </el-tooltip>
      <el-tooltip effect="light" popper-class="main-modify-tooltip" content="" placement="left">
        <div slot="content" style="font-size: 14px; font-weight: initial; line-height: 24px;" class="">
          联系方式
          <p>西安分中心：18189135703</p>
          <p>汉中分中心：13093920312</p>
          <p>宝鸡分中心：15309175208</p>
          <p>榆林分中心：13892204811</p>
        </div>
        <div class="contactItem">
          <img class="contactItem-image" src="~@/assets/images/phone-call.png" alt="联系方式" />
          <span class="contactItem-text">联系方式</span>
        </div>
      </el-tooltip>
    </div>
	</div>
</template>

<script>
	import { request } from "@/util/request"
  import { SwiperSlide, Swiper } from "vue-awesome-swiper";
  import "swiper/css/swiper.min.css";


  export default {
    components: {
      Swiper,
      SwiperSlide,
    },
    data() {
	    return {
        image: [],
        images:[],
        img:[],
        timer:null,
        numIndex: 3,
        policys:[],
        num:0,
        //  新版数据
        bannerImg: '',
        cultureList: [],
        productList: [],
        companyName: '',
        companyDesc: '',
        companyList: [],
        swiperOption: {
          loop: true,
          autoplay: {
            delay: 3000,
            stopOnLastSlide: false,
            disableOnInteraction: false
          },
          slidesPerView : 4,
          slidesPerGroup : 2,
        }
	    };
	  },
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper
      }
    },
	  mounted() {
	  	this.timer = setInterval(() => {
			if(this.images.length>4){
				this.right();
			}
	  	   }, 4000)
	  },
	  beforeDestroy() {
      clearTimeout(this.timer);
    },
	  methods: {
      goProduct (url) {
        console.log('==跳转新界面==')
        window.open(url)
      },
		  product(){
        this.$router.push({
          path:"/product"
        })
		  },
		  getImg() {
		  	request({
		  		method: 'get',
		  		url: 'picture/getPicture',
		  		params: {
		  			type:1
		  		}
		  	}).then(res => {
				let img=null;
				img=res.data
		  		img.forEach(i=>{
					this.image.push({"url":i.url})
		  		})
		  	})
		  },
		  getImg1() {
		  	request({
		  		method: 'get',
		  		url: 'picture/getPicture',
		  		params: {
		  			type:2
		  		}
		  	}).then(res => {
		  				let img=null;
		  				img=res.data
		  		img.forEach(i=>{
		  					this.images.push({"url":i.url})
							this.img.push({"url":i.url})
		  		})
				this.img.splice(4,5)
		  	})
		  },
		  details(row) {
		  	const infos = row;
		  	localStorage.setItem('infos', JSON.stringify(infos))
		  	this.$router.push({
		  		path: "/details",
		  		params: {
		  			info: infos
		  		}
		  	})
		  },
		  left() {
		        // console.log("点击了左箭头");
		        if (this.numIndex > 3) {
		          this.img.unshift(this.images[this.numIndex - 4]); //前面添加一个
		          this.img.pop(this.img[this.numIndex]); //后面删除一个，此处的index因为前面添加了一个新数据的缘故，注意看是否为数组的最后一个数据
		          this.numIndex--;
		        }else{
					this.$message({
					  showClose: true,
					  message: "前面没有更多了",
					});
				}
		      },
		      right() {
				if (this.numIndex < this.images.length - 1) {
		        this.img.shift(this.img[this.numIndex - 3]); //前面删除一个
		        this.img.push(this.images[this.numIndex + 1]); //后面添加一个
		        this.numIndex++;
				}else if(this.numIndex>=this.images.length-1&&this.numIndex<this.images.length+3){
					this.numIndex++;
					this.img.shift(this.img[this.numIndex - 3]); //前面删除一个
					this.img.push(this.images[this.num]); //后面添加一个
					this.num++;
				}else{
					this.numIndex=3;
					this.num=0;
				}
		  },
      getzc(){
        request({
          method: 'get',
          url: 'articleInfo/getzc',
          params:{
            pageNum: 1,
            pageSize: 999999,
          }
        }).then(res=>{
          this.policys = res.data.list
          this.policys.forEach(i=>{
            i.updateDate=i.updateDate.slice(0,10)
          })
            // console.log(res)

        })
      },
      getBannerFn () {
        this.$api.queryBanner({ type: this.$constants.bannerTypes.home }).then(res => {
          if (![0, 200].includes(res.code)) {
            return this.$message.error(res.msg)
          }
          if (res.data[0]) {
            this.bannerImg = res.data[0].image
          }
        })
      },
      getCultureFn (type) {
        request({
          method: 'get',
          url: '/index/getCulture',
          params:{
            type: type
          }
        }).then(res=>{
          if (res.code == 0) {
            if (type == 1) {
              this.cultureList = res.data
            } else if (type == 2) {
              this.productList = res.data
            } else {
              // this.companyList = res.data.concat(res.data)
              this.companyList = res.data
              if (res.data[0]) {
                this.companyName = res.data[0].name
                this.companyDesc = res.data[0].description
              }
            }
          }
        })
      },
	  },
	  created() {
	  	this.getzc()
      this.getImg()
      this.getImg1()
      // 获取banner
      this.getBannerFn()
      this.getCultureFn(1)
      this.getCultureFn(2)
      this.getCultureFn(3)
	  }
	};
</script>
<style lang="stylus">
.main-modify-tooltip
  &.el-tooltip__popper.is-light
    border-color #d9d9d9
    &[x-placement^=left] .popper__arrow
      border-left-color #d9d9d9
</style>
<style lang="stylus" scoped>
.contact
  background #fff
  top 50%
  z-index: 999;
  display: block;
  position: fixed;
  right: 20px;
  border-radius 4px
  box-shadow 0 6px 16px 0 rgba(0, 0, 0, 0.08);
  &Item
    box-sizing border-box
    display flex
    flex-direction column
    align-items: center;
    padding 8px 8px
    cursor pointer
    & + &
      border-top: 1px solid #eee;
    &-image
      imageSize = 40px
      width imageSize
      height imageSize
      object-fit: contain;
      display block
    &-text
      display block
      font-size 11px
div
  box-sizing: border-box
.main-container
  width: 100%;
  min-height: 100vh;
  height: auto;
.p-b-20
  padding-bottom: 20px;
.banner
  display: block;
  width: 100%;
  height: auto;

introSectionWidth = 1440px
.intro-section
  width: introSectionWidth;
  height: auto;
  margin: 0 auto;
  .title-block
    padding: 20px 0;
    font-weight: 600;
    text-align: center;
    .title
      font-size: 26px;
      color: #222222;
    .desc
      padding: 12px 0;
      font-size: 16px;
      color: #666666;
    .line
      width: 72px;
      height: 5px;
      margin: 0 auto;
      border-radius: 3px;
      background: #FC6621;


  .product-list
    width 100%
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    background: #fff;
    padding: 8px 0;
    .product-item
      flex: 1;
      padding: 15px 10px;
      background: #fff;
      text-align: center;
      img
        width: 120px;
        height: 120px;
      p
        margin-top: 30px;
        height: 76px;
        color: #333333;
        font-size: 18px;
      .go-detail
        width: 94px;
        height: 40px;
        line-height: 40px;
        margin: 10px auto 0 auto;
        border-radius: 6px;
        color: #fff;
        background: #FF7B3F;
        font-size: 18px;
        font-weight: 500;
        cursor: pointer;
    .culture-item
      width: 326px;
      margin: 0 10px;
      padding: 15px 0;
      background: #fff;
      text-align: center;
      font-size: 18px;
      color: #333333;
      img
        width: 306px
      .name
        padding-top: 20px;
        padding-bottom: 10px;
        font-size: 20px;
        font-weight: 500;
        color: #FC6621;
      .desc
        width: 70%;
        margin: 0 auto;
    .company-item
      position: relative
      width: 328px;
      height: 250px
      padding: 0 10px;
      img
        display: block;
        width: 308px;
        height: 250px;
      .company-info
        position: absolute;
        left: 15px;
        right: 15px;
        bottom: 10px;
        font-size: 14px;
        color: #fff;
        textWrap()
        .name
          color: #fff;
          font-size: 15px;
          font-weight: PingFangMedium600;

.intro-block-company
  background: #F9F9F9;
.company
  padding: 20px 50px;
  background: #fff;
  .name
    padding: 10px;
    font-size: 20px;
    font-weight: PingFangMedium600;
    color: #FC6621;
  .desc
    font-size: 14px;
    color: #333333;
    line-height: 30px


</style>

